import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { getGroup, updateGroup_statue, group_search_Administration, updateGroup_statue_ok } from '../../../request/api'
import { useDispatch, useSelector } from 'react-redux';
import './Administration.css'
import { setAdministrationCheck, setLookList_Administration } from '../../../store/module/store';


const App: React.FC = (props, ref) => {
  const dispatch = useDispatch()
  let is_group = useSelector((state: any) => state.storeList.is_group)
  let look_list_Administration = useSelector((state: any) => state.storeList.look_list_Administration)


  interface DataType {
    name: String,//团长姓名
    phone: String,//联系方式
    pick_name: String,//自提点名称
    pick_address: String,//自提点地址
    pick_type: String,//自提点类型
    examine_name: String,//审核人
    examine_type: String,//审核状态
    examine_time: String,//审核时间
    void_text: String,//作废理由
    deal_price: Number,//成交金额
    daar_num: Number,//成交数量
    statue: String,//状态
    label: String,//标签
  }


  const columns: TableColumnsType<DataType> = [
    { title: 'ID', dataIndex: 'key', },
    { title: '申请时间', dataIndex: 'examine_time', },
    { title: '姓名', dataIndex: 'name', },
    { title: '手机号', dataIndex: 'phone', },
    { title: '自提点名称', dataIndex: 'pick_name', },
    { title: '自提点地址', dataIndex: 'pick_address', },
    { title: '自提点类型', dataIndex: 'pick_type', },
    { title: '成交金额', dataIndex: 'deal_price', },
    { title: '成交订单', dataIndex: 'daar_num', },
    { title: '状态', dataIndex: 'statue', },
    {
      title: '操作', dataIndex: '',
      render: (text: any) =>
        <p>
          <a onClick={() => { group_ok_statue(text.key) }}>有效 </a>
          <a onClick={() => { group_up_statue(text.key) }}>无效 </a>
        </p>,
    },
  ];
  //选中的行
  const rowSelection: TableProps<DataType>['rowSelection'] = { // 定义表格的行选择
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      dispatch(setAdministrationCheck(selectedRowKeys))
    },
  };

  const [group_list, setGroup_list] = useState([])
  const [box, setBox] = useState<any>({})


  useEffect(() => {
    get_group();
  }, [is_group])


  //获取分组列表
  const get_group = async () => {
    if (look_list_Administration) {
      let res = await group_search_Administration({ look_list_Administration: look_list_Administration })
      setGroup_list(res.data.filter(item => item.examine_type === '已通过'))
      dispatch(setLookList_Administration({}))
    } else {
      let res = await getGroup({})
      setGroup_list(res.group_list.filter(item => item.examine_type === '已通过'))
    }
  }

  const dataSource = group_list.map((item: any) => ({
    key: item._id,
    ID: item.key,
    name: item.name,//团长姓名
    phone: item.phone,//联系方式
    pick_name: item.pick_name,//自提点名称
    pick_address: item.pick_address,//自提点地址
    pick_type: item.pick_type,//自提点类型
    examine_name: item.examine_name,//审核人
    examine_type: item.examine_type,//审核状态
    examine_time: item.examine_time,//审核时间
    void_text: item.void_text,//作废理由
    deal_price: item.deal_price,//成交金额
    daar_num: item.daar_num,//成交数量
    statue: item.statue,//状态
    label: item.label,//标签
    wx_name: item.wx_name,//授权微信昵称
    store_statue: item.store_statue,//是否有门店
    coordinate: item.coordinate,//坐标
    door_number: item.door_number,//门牌号
    start_time: item.start_time,//营业开始时间
    end_time: item.end_time,//营业结束时间
    business_img: item.business_img,//营业执照
    pick_img: item.pick_img,//自提点图片
    phone_spare: item.phone_spare,//备用电话
    user_img: item.user_img,//身份信息
  }))



  //修改状态无效
  const group_up_statue = async (id: any) => {
    const res = await updateGroup_statue({ id: id })
    if (res.code === 200) {
      alert('修改成功')
      get_group()
    }
  }
  //修改状态有效
  const group_ok_statue = async (id: any) => {
    const res = await updateGroup_statue_ok({ id: id })
    if (res.code === 200) {
      alert('修改成功')
      get_group()
    }
  }



  return (
    <div>
      <Table<DataType>
        rowSelection={{ type: 'checkbox', ...rowSelection }}
        columns={columns}
        dataSource={dataSource}
        pagination={{
          pageSize: 6,
          showQuickJumper: true,
          position: ['bottomLeft']
        }}
      />
    </div >
  );
};

export default App;

